<template>
<div id="out13">
    <div id="top3">
		<a href="#/GerenZhongxing"><img id="imgTop1" src="../assets/img/duanhuowang/zuojiantou.png" alt=""/></a>
		<span>客服与反馈</span>
		<div>反馈</div>
	</div> 
	<div class="back"></div>
	<div class="anquan">
		<span>安全提醒:</span>
		阿拉德不换衣服看演出 系统设计的应用让顾客江西银行开心果额呃呃额额呃呃鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅
	</div>
	<p class="lianxi">
		联系客服
		<span>工作时间：<span>9:00——24:00</span></span>
	</p>
	<ul class="gongNeng">
		<li>
			<img src="../assets/img/gerenzhongxin/2kefuyufankui/dingdanzixun.png" alt=""/>
			<div>
				<p class="title">订单咨询</p>
				<p>订单修改 取消订单 订单查询</p>
			</div>
			<img src="../assets/img/fenlei/more.png"/>
		</li>
		<li>
			<img src="../assets/img/gerenzhongxin/2kefuyufankui/dingdanzixun.png" alt=""/>
			<div>
				<p class="title">订单咨询</p>
				<p>订单修改 取消订单 订单查询</p>
			</div>
			<img src="../assets/img/fenlei/more.png" alt=""/>
		</li>
		<li>
			<img src="../assets/img/gerenzhongxin/2kefuyufankui/dingdanzixun.png" alt=""/>
			<div>
				<p class="title">订单咨询</p>
				<p>订单修改 取消订单 订单查询</p>
			</div>
			<img src="../assets/img/fenlei/more.png" alt=""/>
		</li>
		<li>
			<img src="../assets/img/gerenzhongxin/2kefuyufankui/dingdanzixun.png" alt=""/>
			<div>
				<p class="title">订单咨询</p>
				<p>订单修改 取消订单 订单查询</p>
			</div>
			<img src="../assets/img/fenlei/more.png" alt=""/>
		</li>
	</ul>
	<p class="changjian">常见问题</p>
	<ul class="bottom">
		<li>
			生怕啊求科普
			<img src="../assets/img/fenlei/more.png" alt=""/>
		</li>
		<li>
			为什么还没发货
			<img src="../assets/img/fenlei/more.png" alt=""/>
		</li>
		<li>
			发货了为什么后面的
			<img src="../assets/img/fenlei/more.png" alt=""/>
		</li>
		<li>
			千挑万挑
			<img src="../assets/img/fenlei/more.png" alt=""/>
		</li>
	</ul>
</div>
</template>

<script>
	export default {
		name: '',
		methods: {
			round2: function() {
				
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round2();
		},
	}
</script>

<style>
	#out13{
		height: 100vh;
		overflow: scroll;
		background: #f2f2f2;
	}
	#out13>.back{
		height: 9.6rem;
	}
	#out13>#top3 {
		width: 100vw;
		height: 9.6rem;
		background: #e53e42;
		color: white;
		display: flex;
		position: fixed;
		z-index: 10;
		align-items: center;
		text-align: center;
		justify-content: space-around;
	}
	#out13 #imgTop1 {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	#out13 #top3>span {
		width: 37.6rem;
		height: 3.6rem;
		font-family: MicrosoftYaHei;
		font-size: 3.6rem;
		line-height: 3.6rem;
		box-sizing: border-box;
		padding-left: 2rem;
	}
	#out13 #top3>div{
		font-size: 3rem;
	}
	#out13>.anquan{
		height: 13rem;
		background-color: #f9d3d4;
		padding: 2rem;
		box-sizing: border-box;
		font-size: 2.4rem;
		line-height: 3rem;
		color: #666666;
	}
	#out13>.anquan>span{
		color: #e53e42;
		font-size: 2.8rem;
	}
	#out13>.lianxi{
		font-size: 2.8rem;
		padding: 2rem 1.7rem;
		color: #4d4d4d;
	}
	#out13>.lianxi>span{
		float: right;
	}
	#out13>.lianxi>span>span{
		color: #e53e42;
	}
	#out13>.gongNeng{
		padding: 0 2rem;
	}
	#out13>.gongNeng>li{
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 68rem;
		height: 14rem;
		background: #FFFFFF;
		margin-bottom: 2rem;
	}
	#out13>.gongNeng>li>img:first-child{
		width: 8rem;
		height: 8rem;
	}
	#out13>.gongNeng>li>img:last-child{
		width: 1.4rem;
		height: 2.4rem;
	}
	#out13>.gongNeng>li>div{
		color: #808080;
		font-size: 2.4rem;
		width: 48rem;
	}
	#out13>.gongNeng>li>div>.title{
		color: #4d4d4d;
		font-size: 3.6rem;
		margin-bottom: 2rem;
	}
	#out13>.changjian{
		color: #4d4d4d;
		font-size: 2.8rem;
		padding: 2rem 0;
		padding-left: 2rem;
	}
	#out13>.bottom{
		margin-bottom: 10rem;
	}
	#out13>.bottom>li{
		color: #4d4d4d;
		font-size: 2.8rem;
		background: #FFFFFF;
		padding: 2rem;
		border-bottom: 0.1rem solid #CCCCCC;
	}
	#out13>.bottom>li>img{
		width: 1.4rem;
		height: 2.4rem;
		float: right;
	}
</style>